<template>
	<page-container :shownav="true" :isback="true" navtitle="设置" :istabbox="false">
		<view class="content-root content">
			<view class="content-box">
				<view class="content-item mine-list">
					<view class="mine-info">
						<view class="title">
							头像
						</view>
						<view class="info">
							<!-- <image :src="userInfo.avatar?userInfo.avatar:'/static/img/mine/defalut-avatar.png'"
								class="avatar" @click="upLoadImage"></image> -->
							<upload-img @submit="setImg" style="border-radius: 50%;" :imgList="avatarList"
								:maxCount="1"></upload-img>
						</view>
					</view>
				</view>

				<view class="content-item mine-list">
					<view class="row">
						<view class="grid" v-for="(item,index) in itemData" :key="index" @click="itemClick(item)">
							<view class="item">
								<image :src="item.icon"></image>
								<view class="title">
									{{ item.title }}
								</view>
							</view>
							<view class="arrow">&gt;</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-popup :show="showModal" :round="10" mode="center" @close="showModal=false">
			<view style="padding-bottom: 20rpx;">
				<view
					style="padding: 20rpx;text-align: center;font-size: 30rpx;font-weight: 800;background-color: rgba(252, 189, 189, 1);border-radius: 10px 10px 0 0;">
					退出登录</view>
				<view style="padding: 20rpx;text-align: center;font-size: 30rpx;color: #434141;">是否换个账号登录？</view>
				<view style="display: flex;padding: 20rpx;">
					<view @click="quitClick"
						style="width: 245rpx;height: 60rpx;line-height: 60rpx; border-radius: 10rpx;border: 1px solid #C3C3C3;text-align: center;color:#434141;font-size: 30rpx;">
						直接退出</view>
					<view @click="quitClick"
						style="margin-left: 20rpx; width: 245rpx;height: 60rpx;line-height: 60rpx; border-radius: 10rpx;background-color: rgba(216, 30, 6, 1); text-align: center;color:#fff;font-size: 30rpx;">
						换个账号</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-modal :show="showModal" title="退出登录" content='是否换个账号登录' confirmText="换个账号" cancelText="直接退出"
			:showCancelButton="true"></u-modal> -->
	</page-container>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		baseMixins
	} from "@/util/baseMixins";
	import {
		loginPage,
		messagePage
	} from "@/util/publicConfig";
	import {
		setToken,
		requestPut
	} from "@/util/means/request";
	import {
		getUserInfo,
		PUT_UPDATE_AVATAR
	} from "@/service/user";
	import {
		baseApiUrl
	} from "@/util/publicConfig";
	import {
		getQueryHeaders
	} from "@/util/means/request";
	export default {
		components: {
			uploadImg,
		},
		mixins: [baseMixins],
		data() {
			return {
				userInfo: {
					representativeName: 'aaaaaa',
					representativeDuty: 'sssss'
				},
				avatarList: [],

				itemData: [{
					title: '退出登录',
					icon: '/static/img/mine/my2.png',
					fun: 'doLogOut'
				}],
				showModal: false
			}
		},
		onLoad() {
			// this.initUser()
		},
		created() {
			this.initUser()
		},
		methods: {
			itemClick({
				url,
				fun
			}) {
				if (url === '/pages/message/index') return
				this[fun](url)
			},
			goPage(url) {
				this.redirectToPage(url)
			},
			doLogOut() {
				this.showModal = true

			},
			quitClick() {
				this.showModal = false
				setToken('')
				this.goPage(loginPage)
			},
			initUser() {
				this.userInfo = getUserInfo() || {}
				this.avatarList = [{
					url: this.userInfo.avatar,
					name: '11'
				}]
			},
			setImg(img) {
				console.log(img, "setImg===============");
				if (img.length > 0) {
					let tempUrl = img.map(item => item.url)
					console.log(tempUrl, "头像地址===============");
					if (url == "上传失败！") {
						uni.showToast({
							title: url,
							icon: "none"
						})
					} else {
						this.userInfo.avatar = tempUrl
						this.avatarList = img
						requestPut({
							url: PUT_UPDATE_AVATAR,
							data: {
								avatar: this.userInfo.avatar
							},
							header: getQueryHeaders()
						}).then(res => {
							this.initUser()
						}).catch(e => {})
					}
				} else {
					this.avatarList = []
				}
			},
			upLoadImage() {
				let _this = this
				uni.chooseImage({
					count: 1,
					// sizeType: ['original'],
					// crop: {
					// 	quality: 100, //图片质量,不填为80
					// 	width: 200, //裁剪宽度
					// 	height: 200, //裁剪高度
					// },
					success: res => {
						//从相册或摄像头拿到图片临时路径及信息后进行判断
						//res.temFiles.size返回的单位为B 1KB=1024B
						if (res.tempFiles.size > 16 * 1024 * 1024) {
							uni.showToast({
								title: '图片大小不能超过16M',
								icon: 'none'
							})
							return
						}
						console.log(res.tempFilePaths[0], "tempFilePaths======");
						uni.uploadFile({
							url: `${baseApiUrl}/common/upload`, // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: getQueryHeaders(),
							success: (res) => {
								console.log(res, "======================");
								let _data = JSON.parse(res.data)
								if (_data.code == 200) {
									let url = JSON.parse(res.data).message
									this.userInfo.avatar = url
								} else {
									uni.showToast({
										title: _data.message,
										icon: "none"
									})
								}
							},
							fail: err => {
								console.log(err)
								uni.showToast({
									title: "上传失败",
									icon: "none"
								})
							}
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-root {
		overflow: auto;
		height: 100%;
	}

	.content-box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		// background: url('/static/img/bg.png');
		box-sizing: border-box;

		.mine-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #222222;
			font-size: 36rpx;

			.info {
				display: flex;
				align-items: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: $border-radius-circle;
					background: #FFF;
				}
			}
		}


		.mine-list {
			width: 100%;
			background-color: $bg-color-white;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: $border-radius-lg;
			box-sizing: border-box;

			.row {
				.grid {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;

					.item {
						display: flex;
						align-items: center;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						margin-bottom: 0;
					}

					.title {
						align-items: center;
						font-size: $font-size-lg;
						margin-left: 30rpx;
					}

					.arrow {
						margin-top: -10rpx;
						font-size: $font-size-lg;
						color: #ababab;
					}
				}
			}
		}

		.serve {
			.content-item {
				padding: 20rpx;
				//background-color: red;
				background-color: $bg-color-white;
				border-radius: $border-radius-lg;
				margin-bottom: 20rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.title {
						font-size: $font-size-lg;
						font-weight: 500;
					}

					.subtitle {
						font-size: $font-size-base;
						color: $text-color-grey;
					}
				}

				.row {
					display: flex;
					flex-wrap: wrap;

					.grid {
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 10rpx 0;
						// padding: 20rpx;

						image {
							width: 70rpx;
							height: 70rpx;
							margin-bottom: $spacing-row-base;
						}

						.title {
							font-size: $font-size-base;
							color: $text-color-base;
							display: flex;
							align-items: baseline;
						}
					}

				}

				.content-news {

					//background-color: red;
					.news-list {
						margin: 30rpx 0;
						padding-bottom: 30rpx;
						border-bottom: #C7C7C7 1rpx solid;
						display: flex;

						.news-img {
							image {
								width: 243rpx;
								height: 151rpx;
								border-radius: $border-radius-lg;
							}
						}

						.news-content {
							margin-left: 30rpx;
							width: 470rpx;

							.content-top {
								//padding: 2px 0;
								font-size: 30rpx;
								width: 420rpx;
								height: 80rpx;
								color: #222222;
								//background-color: yellow;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}

							.content-bottom {
								margin-top: 40rpx;
								font-size: 26rpx;
								color: #ABABAB;
								//background-color: pink;
							}
						}
					}

					.news-list:last-child {
						border-bottom: none;
						margin-bottom: 0;
						padding-bottom: 0;
					}
				}
			}
		}

		.advertisement {
			margin-top: 30rpx;

			img {
				width: 100%;
				border-radius: $border-radius-lg;
				margin-bottom: 30rpx;
			}
		}
	}

	::v-deep .u-upload__wrap__preview__image {
		border-radius: 50%;
	}
</style>